<template>
  <a-modal :open="open" width="1100px" :footer="false" title="发药明细" centered @cancel="onCancel">
    <div class="flex justify-end">
      <BaseExport type="门诊" name="西成药发药汇总明细" :search-params="formState" code="00001153">导出</BaseExport>
    </div>
    <BaseTable class="mt-2" :loading="loading" column-code="00001153" :data-source="tableData" bordered :pagination="pagination">
      <template #bodyCell="{ column, index }">
        <template v-if="column.dataIndex === 'xh'">
          <div>{{ index + 1 }}</div>
        </template>
      </template>
    </BaseTable>
  </a-modal>
</template>
<script setup>
import { watch } from 'vue'

import BaseTable from '@/components/BaseTable'

const emit = defineEmits(['update:open', 'success'])
const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  rowData: {
    type: Object,
    default: () => ({})
  },
  formData: {
    type: Object,
    default: () => ({})
  }
})
const formState = ref({})

const { loading, tableData, pagination, getData } = useTable({
  url: '/outp/mzyf/getKcFyRolloverSummaryDetails',
  formatParams: () => {
    return {
      stdate: props.formData.dateRange?.[0],
      eddate: props.formData.dateRange?.[1],
      operationmode: 4,
      ph: props.formData.sfph ? props.rowData.ph : '',
      ypbh: props.rowData?.bh,
      xmlbs: [2, 4]
    }
  }
})
const onCancel = () => {
  emit('update:open', false)
}

watch(
  () => props.open,
  (val) => {
    if (val) {
      getData()
      formState.value = {
        stdate: props.formData.dateRange?.[0],
        eddate: props.formData.dateRange?.[1],
        operationmode: 4,
        ph: props.formData.sfph ? props.rowData.ph : '',
        ypbh: props.rowData?.bh,
        xmlbs: [2, 4]
      }
    }
  }
)
</script>

<style lang="less" scoped>
.button-active {
  line-height: 30px;
  border: 1px solid var(--primary-color);
}
.active {
  color: #fff;
  background-color: var(--primary-color);
}
</style>
